/*
 * @description: 
 * @Date: 2022-10-05 15:25:05
 * @LastEditTime: 2022-11-25 00:13:34
 */
/** @type {import('tailwindcss').Config} */
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
  content: ["./src/index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {
      gridTemplateColumns: {
        't14': 'repeat(14, minmax(60px, 60px))',
        't12': 'repeat(12, minmax(60px, 60px))',
        't10': 'repeat(10, minmax(60px, 60px))',
        't8': 'repeat(8, minmax(60px, 60px))',
        't6': 'repeat(6, minmax(60px, 60px))',
        't4': 'repeat(4, minmax(60px, 60px))',
      },
      gridTemplateRows: {
        // Simple 8 row grid
        't8': 'repeat(50,minmax(0,1fr))',
      },
      gridRow: {
        'span-2': 'span 2 / span 2',
      },
      gridCol: {
        'span-4': 'span 4 / span 4',
        'span-2': 'span 2 / span 2',
      },
      minWidth: {
        '0': '0',
        '1/4': '25%',
        '1/2': '50%',
        '3/4': '75%',
        '7/8': 'calc(100% - 30px)',
        'full': '100%',
      },
      screens: {
        'xs': '480px',
        'mxl': { 'max': '1279px' },
        'mlg': { 'max': '1023px' },
        'mmd': { 'max': '896px' },
        'mxs': { 'max': '480px' },
        ...defaultTheme.screens,
      }
    },
  },
  plugins: [
    function({addBase}) {
      addBase({
        ".el-button": {
          "background-color": "var(--el-button-bg-color,val(--el-color-white))"
        }
      })
    }
  ],
}
